<html>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script>
var init = function(){
  $('#border')
	.css('border-top-width',$('#border1').attr('value'))
	.css('border-right-width',$('#border2').attr('value'))
	.css('border-bottom-width',$('#border3').attr('value'))
	.css('border-left-width',$('#border4').attr('value'))
	.css('border-top-color',$('#color1').attr('value'))
	.css('border-right-color',$('#color2').attr('value'))
	.css('border-bottom-color',$('#color3').attr('value'))
	.css('border-left-color',$('#color4').attr('value'));
}

$(function(){
  init();
  $('input,select').change(function(){  
    init();
  });

  $('#genform').submit(function(){
    
    var formdata = $('#genform').serialize().replace(/%5B/g, '[').replace(/%5D/g, ']');
    var posturl = '/cssgen.php';

    $('#csscode').load(posturl + '?' + formdata);

    return false;
  });

});

</script>
<style>
#border {
	width: 1px;
	height: 1px;
	display: block;
	border-top: 5px solid;
	border-right: 5px solid;
	border-bottom: 5px solid;
	border-left: 5px solid;
}
.clear { clear: both; height: 0px; float: none; }
</style>
<body>
<div id="border"></div>
<form action="cssgen.php" method="get" id="genform">
<p><input type="range" min="0" max="50" value="25" id="border1" name="dimensions[top][height]" /> 
  <select id="color1" name="dimensions[top][color]">
    <option value="red">red</option>
    <option value="orange">orange</option>

    <option value="yellow">yellow</option>
    <option value="green">green</option>
    <option value="blue">blue</option>
    <option value="indigo">indigo</option>
    <option value="violet" selected="selected">violet</option>
    <option value="transparent">transparent</option>

  </select>
</p>
<p><input type="range" min="0" max="50" value="50" id="border2" name="dimensions[right][height]"/> 
  <select id="color2" name="dimensions[right][color]">
    <option value="red" selected="selected">red</option>
    <option value="orange">orange</option>
    <option value="yellow">yellow</option>
    <option value="green">green</option>

    <option value="blue">blue</option>
    <option value="indigo">indigo</option>
    <option value="violet">violet</option>
    <option value="transparent" selected="selected">transparent</option>
  </select>
</p>
<p><input type="range" min="0" max="50" value="0" id="border3" name="dimensions[bottom][height]"/> 
  <select id="color3" name="dimensions[bottom][color]">

    <option value="red" selected="selected">red</option>
    <option value="orange">orange</option>
    <option value="yellow">yellow</option>
    <option value="green">green</option>
    <option value="blue">blue</option>
    <option value="indigo">indigo</option>

    <option value="violet">violet</option>
    <option value="transparent" selected="selected">transparent</option>
  </select>
</p>
<p><input type="range" min="0" max="50" value="0" id="border4" name="dimensions[left][height]"/> 
  <select id="color4" name="dimensions[left][color]">
    <option value="red" selected="selected">red</option>
    <option value="orange">orange</option>

    <option value="yellow">yellow</option>
    <option value="green">green</option>
    <option value="blue">blue</option>
    <option value="indigo">indigo</option>
    <option value="violet">violet</option>
    <option value="transparent" selected="selected">transparent</option>

  </select>
</p>
<button id="cssgen">Generate CSS</button>
</form>
<div class="clear"></div>
<textarea id="csscode" cols="35" rows="5"></textarea>
</body>
